<template>
    <div style="background: #ffffff;">
        <el-row :gutter="24">
            <el-col :span="9">
                <div style="display: flex;margin: 20px 0 20px 20px;">
                    <div style="display: flex;width: 240px;flex-direction: column;">
                        <span style="color: rgba(0, 0, 0, 0.85);text-align: right;font-size: 14px">物资编码起始号：</span>
                        <span style="color: rgba(0, 0, 0, 0.85);text-align: right;font-size: 14px"">Start Item Code：</span>
                    </div>
                    <el-input v-model="startItemNum" placeholder="请输入" size="medium"
                              style="margin: 0 20px 10px" @keyup.enter.native="searchChange"
                    ></el-input>
                </div>
            </el-col>
            <el-col :span="9">
                <div style="display: flex;margin: 20px 0 20px 20px;">
                    <div style="display: flex;width: 240px;flex-direction: column;">
                        <span style="color: rgba(0, 0, 0, 0.85);text-align: right;font-size: 14px">物资编码结束号：</span>
                        <span style="color: rgba(0, 0, 0, 0.85);text-align: right;font-size: 14px">Ens Item Code：</span>
                    </div>
                    <el-input v-model="endItemNum" placeholder="请输入" size="medium"
                              style="margin: 0 20px 10px" @keyup.enter.native="searchChange"
                    ></el-input>
                </div>
            </el-col>
            <el-col :span="3">
                <el-tooltip content="Search" placement="top">
                    <el-button style="margin-top: 20px;" type="success"
                               icon="el-icon-search" size="medium" @click='searchChange'>搜索</el-button>
                </el-tooltip>
            </el-col>
            <el-col :span="3">
                <el-tooltip content="Reset" placement="top">
                    <el-button style="margin-top: 20px;" icon="el-icon-refresh"
                               @click="resetChange" size="medium">重置</el-button>
                </el-tooltip>

            </el-col>
        </el-row>

        <el-table
            :data="tableData" border
            style="width: 100%;text-align: center"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.5)">
            <el-table-column fixed="left"
                prop="imageUrl"
                label="图片,Image"
                min-width="220px" :render-header="renderHeader">
                <template slot-scope="scope">
                    <el-row :gutter="24">
                        <el-col :span="12">
                            <div class="show-photo">
                                <div class="photoBj">
                                    <span class="showPhotoMode" @click="handlePictureCardPreview(scope)">
                                        <i style="color: #f8f8f8;fontSize: 20px" class="el-icon-zoom-in"></i>
                                    </span>
                                </div>
                                <img :src="scope.row && scope.row.imageUrl" class="avatar">
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div  class="uploadHover" @click="changeUploadImages(scope)">
                                <div class="uploadImages">
                                    <i class="el-icon-plus"></i>
                                    <div class="ant-upload-text">Upload</div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </template>
            </el-table-column>
            <el-table-column
                prop="itemNum"
                label="物资编码,Item Code"
                min-width="120px" :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="itemDesc"
                label="物资描述,Item Description"
                min-width="260px" :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="num1"
                label="主单位,Main Unit"
                min-width="150px" :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="num2"
                label="采购单位,Purchasing Unit"
                min-width="150px" :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="num3"
                label="主单位和采购单位转比,Rotation Ratio"
                min-width="200px" :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="num4"
                label="采购单位,MOQ"
                min-width="200px" :render-header="renderHeader">
            </el-table-column>
        </el-table>
        <PaginationMode :pageData="pageData" @onPageChange="onPageChange" />

        <!--上传图片-->
        <UploadImage :scope="uploadImageScope" :uploadImagesVisible="uploadImagesVisible"
                     @hiddeUploadImages="hiddeUploadImages" />

        <!--查看图片-->
        <ImagesEnlargeModel :imageUrl="imageUrl"  :enlargeVisible="enlargeVisible"
                            @hiddenImagesEnlarge="hiddenImagesEnlarge" />
    </div>
</template>

<script>
import {materialImageList} from "../../axios/url";
import http from "../../axios/fetch";
import renderHeader from '../../common/renderHeader.js';
import PaginationMode from '../../common/Pagination.vue';
import UploadImage from './UploadImage'
import ImagesEnlargeModel from './ImagesEnlargeModel'

    export default {
        data() {
            return {
                tableData: [],
                pageData: {},
                page: 1,
                keyword: null,
                uploadImagesVisible: false,
                uploadImageScope: {}, // 存储每行列表数据
                startItemNum: null,
                endItemNum: null,
                loading: true,
                imageUrl: null,
                enlargeVisible: false
            }
        },
        components: {
            PaginationMode,
            UploadImage,
            ImagesEnlargeModel,
        },
        mounted(){
            this.getMaterialImageList();
        },
        methods: {
            renderHeader: renderHeader,
            getMaterialImageList(param) { // 列表数据
                try{
                    http.post(materialImageList, param).then(res => {
                        if(res.data && res.data.resultMess === "success") {
                            this.hiddenLoading();
                            this.tableData = res.data.data.list
                            this.pageData = res.data.data.page
                        }
                    })
                } catch (e){
                    this.hiddenLoading();
                    this.$notify.error({
                        title: '提示',
                        message: '网络错误',
                    });
                }
            },
            onPageChange(page) { // 分页
                this.showLoading();
                const param = {
                    page: page,
                    startItemNum: this.startItemNum,
                    endItemNum: this.endItemNum
                }
                this.getMaterialImageList(param);
            },
            searchChange() { // 搜索
                this.showLoading();
                const param = {
                    page: this.page,
                    startItemNum: this.startItemNum,
                    endItemNum: this.endItemNum
                }
                this.getMaterialImageList(param);
            },
            resetChange() { // 重置
                this.startItemNum = null;
                this.endItemNum = null;
                this.page = 1;
                this.showLoading();
                const param = {
                    page: 1,
                    startItemNum: null,
                    endItemNum: null
                }
                this.getMaterialImageList(param);
            },
            changeUploadImages(scope) { // 显示上传图片弹窗
                console.log(scope)
                this.uploadImagesVisible = true;
                this.uploadImageScope = scope.row
            },
            handlePictureCardPreview(scope) {  // 查看大图
                this.imageUrl = scope.row.imageUrl;
                this.enlargeVisible = true;
            },
            hiddeUploadImages() {
                this.uploadImagesVisible = false;
                this.getMaterialImageList();
            },
            hiddenImagesEnlarge() {
                this.enlargeVisible = false;
            },
            showLoading() {
                this.loading = true;
            },
            hiddenLoading() {
                this.loading = false;
            }
        },
    }

</script>

<style scoped>
    .avatar{
        width: 100%;
        height: 100%;
        display: block;
    }
    /*物资图片样式*/
    .uploadHover{
        width: 90px;
        height: 90px;
    }
    .uploadHover:hover .uploadImages{
        border: 1px dashed #1890ff;
    }
    .uploadImages {
        width: 90px;
        height: 90px;
        border: 1px dashed #d9d9d9;
        padding: 24px;
        cursor: pointer;
    }

    .show-photo{
        width: 90px;
        height: 90px;
        padding: 8px;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        position: relative;
        margin-right: 20px;
    }

    .show-photo img{
        width: 100%;
        height: 100%;
    }

    .photoBj{
        width: 74px;
        height: 74px;
        position: absolute;
        cursor: pointer;
    }
    .showPhotoMode{
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        padding: 4px 6px;
        z-index: 10;
        white-space: nowrap;
        opacity: 0;
        -webkit-transition: all .3s;
        transition: all .3s;
    }

    .show-photo:hover .photoBj {
        background: #000000;
        z-index: 1;
        -webkit-transition: all .3s;
        transition: all .3s;
        opacity: 0.5;
    }

    .show-photo:hover .showPhotoMode {
        -webkit-transition: all .3s;
        transition: all .3s;
        opacity: 1;
    }
</style>

